<template>
	<!-- 添加弹框 -->
	<el-dialog title="" width="900px" visible :show-close="false" :append-to-body="true" class="wrap" @close="cancel" :close-on-click-modal="false">
		<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
		<div class="bt">{{title}}</div>
		<div id="" style="width: 80%; margin: 0 auto; margin-top: 20px; text-align: left;">
			<el-steps :active="active" finish-status="success">
				<el-step title="学生信息"></el-step>
				<el-step title="查看订单"></el-step>
				<el-step title="完成缴费"></el-step>
			</el-steps>
		</div>
		<br />
		<hr />
		<!--预设步骤一-->
		<div class="bzylist" v-if='formlist2'>
			<div class="inplist1">
				<div class="inpdiv">
					<span style="color: red;">*</span>
					<span>中文名称</span>
					<el-input v-model="vzwm" placeholder="" style="width: 40%;"></el-input>
					<el-button size="mini" @click="czxs() ">查找</el-button>
					
				</div>
				<div class="inpdiv">
					<span style="color: red;">*</span>
					<span>学生电话</span>
					<el-input v-model="vdh" type="number" placeholder="" class='input' style="width: 40%;"></el-input>
					<el-button size="mini" @click="czxs()">查找</el-button>
				</div>
				<div class="inpdiv">
					<span>英文名称</span>
					<el-input v-model="vywm" placeholder="" icon="add" class="inp"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>学生性别</span>
					<el-select v-model="vxb" size="mini" placeholder="" icon="add" class="inp">
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</div>
				<div class="inpdiv">
					<span>出生日期</span>
					<el-date-picker v-model="vcsrq" :editable="false"  :picker-options="pickerOptions0" size="mini" type="date" placeholder="" class="inp"> </el-date-picker>
				</div>
				<div class="inpdiv">
					<span>父母电话</span>
					<el-input v-model="vfmdh" placeholder="" type="number" class="inp" icon="add"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>微信号码</span>
					<el-input v-model="vwx" placeholder="" class="inp" icon="add"></el-input>
				</div>
				<div class="inpdiv">
					<span>家庭地址</span>
					<el-input v-model="vjtdz" placeholder="" class="inp" icon="add"></el-input>
				</div>
				<div class="inpdiv">
					<span style="color: red;">*</span>
					<span>加入班级</span>
					<el-select v-model="ysbjid" v-if="!this.$route.query.iid" class="inp" placeholder="">
						<el-option :label="v.mc+''" :value="v.id+''" v-for="v in ysbjList"></el-option>
					</el-select>
					<el-input v-model="ysbjmc" v-if="this.$route.query.iid" class="inp" disabled placeholder="" icon="add"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>年级班级</span>
					<el-select v-model="vnjbj" size="mini" class="inp" placeholder="">
						<el-option :label="v.njmc" :value="v.id+''" v-for="v in comboxlist"></el-option>
					</el-select>
				</div>
				<div class="inpdiv">
					<span>公立学校</span>
					<el-input v-model="vglxx1" placeholder="" class="inp" icon="add"></el-input>
					<!--<el-button type="" size="small" class="submit1" @click="componentsShow('bq',1)">。。。</el-button>-->
				</div>
				<div class="inpdiv">
					<span>招生来源</span>
					<el-input v-model="vzsly" placeholder="" class="inp" icon="add"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div style="text-align: left;">
					<span style="margin-left: 50px;">学生标签</span>
					<span style="margin-left: 30px;">
						<el-tag  type="success" class="list1" v-for="(v,index) in bqList">
						{{v}}
						<i class="el-icon-close del1" @click="delbq(v)"></i>
						</el-tag>
					</span>

					<el-button type="" size="small" class="submit" @click="componentsShow('bq')">+标签</el-button>
				</div>
			</div>
		</div>
		<!--正式步骤一-->
		<div class="bzylist" v-if='formlist'>
			<div class="inplist1">
				<div class="inpdiv">
					<span>中文名称</span>
					<el-input v-model="vzwm" placeholder="" class="inp"></el-input>
					<!--<el-button size="mini" @click="czxs(vzwm) ">查找</el-button>-->
				</div>
				<div class="inpdiv">
					<span>学生电话</span>
					<el-input v-model="vdh" placeholder="" class='inp'></el-input>
					<!--<el-button size="mini" @click="czxs(vdh)">查找</el-button>-->
				</div>
				<div class="inpdiv">
					<el-button size="mini" @click="getStudentList()">信息查询</el-button>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>学生性别</span>
					<el-input v-model="vxb" placeholder="" class='inp' disabled></el-input>
				</div>
				<div class="inpdiv">
					<span>出生日期</span>
					<el-input v-model="vcsrq" placeholder="" class='inp' disabled></el-input>
				</div>
				<div class="inpdiv">
					<span>父母电话</span>
					<el-input v-model="vfmdh" placeholder="" class="inp" disabled icon="add"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>微信号码</span>
					<el-input v-model="vwx" placeholder="" class="inp" disabled icon="add"></el-input>
				</div>
				<div class="inpdiv">
					<span>家庭地址</span>
					<el-input v-model="vjtdz" placeholder="" class="inp" disabled icon="add"></el-input>
				</div>
				<div class="inpdiv">
					<span>加入班级</span>
					<!--<el-select v-model="ysbjid" v-if="!this.$route.query.iid" class="inp" placeholder="">
						<el-option :label="v.mc" :value="v.id+''" v-for="v in ysbjList"></el-option>
					</el-select>
					<el-input v-model="ysbjmc" v-if="this.$route.query.iid" class="inp" disabled placeholder="" icon="add"></el-input>-->
					<el-input v-model="ysbjmc" placeholder="" class='inp' disabled></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div class="inpdiv">
					<span>年级班级</span>
					<!--<el-select v-model="vnjbj" size="mini" class="inp" placeholder="">
						<el-option :label="v.njmc" :value="v.id" v-for="v in comboxlist"></el-option>
					</el-select>-->
					<el-input v-model="vnjbj" placeholder="" class='inp' disabled></el-input>
				</div>
				<div class="inpdiv">
					<span>公立学校</span>
					<el-input v-model="vglxx1" placeholder="" class="inp" disabled icon="add"></el-input>
					<!--<el-button type="" size="small" class="submit1" @click="componentsShow('bq',1)">。。。</el-button>-->
				</div>
				<div class="inpdiv">
					<span>招生来源</span>
					<el-input v-model="vzsly" placeholder="" class="inp" disabled icon="add"></el-input>
				</div>
			</div>
			<div class="inplist1">
				<div style="text-align: left;margin-top: 20px;">
					<span style="margin-left: 50px;">学生标签</span>
					<span style="margin-left: 30px;">
						<el-tag  type="success" class="list1" v-for="(v,index) in bqList">
						{{v}}
						<!--<i class="el-icon-close del1" @click="delbq(v)"></i>-->
						</el-tag>
					</span>

					<!--<el-button type="" size="small" class="submit" @click="componentsShow('bq')">+标签</el-button>-->
				</div>
			</div>
		</div>

		<!--步骤二-->
		<div class="jflist" v-if="jflist">
			<div v-if='this.xsid1'>
				<div class="jftop1">
					<span class="span1">当前还需缴费：{{hxjje}}元</span>
					<span class="span2">预存金额：{{ycje}}</span>
					<span class="span3" style="text-align:center;"><el-button type="" size="small"  @click="componentsShow('dingdan')">查看订单</el-button></span>
				</div>
				<div class="jftop1">
					<span class="span1" style="width: 100%;">当前还需缴费明细</span>
				</div>
				<el-table :data="comxjfyist" border stripe type="mini" align="center" class="admin-table" sum-text>
					<div slot='empty'>
						<img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
						<span style="vertical-align: middle;">暂时没有数据哦!</span>
					</div>
					<el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in portTitleList" align="center" show-overflow-tooltip v-if="v.hide != 0" :formatter="v.formatter" :align="v.align || 'center'" :fixed="v.fixed" :class-name="v.columnStyle" :width="v.width" :header-align="v.headerAlign || 'center'">
						<template scope="scope">
							<div slot="reference" v-if="scope.column.property === 'yj'">
								{{scope.row.jcjg * scope.row.number * scope.row.zk*1/100 || 0}}
							</div>
							<div slot="reference" v-else>
								{{ scope.row[scope.column.property] }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="100px">
						<template scope="scope">
							<el-button size="small" type="danger" @click="jieshu(scope)" v-for="">结束</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		
		</div>
		<!--步骤三-->
		<div class="jflist" v-if="wcjslist">
			<div>
				<div class="jftop1">
					<span class="span1" style="width: 100%;">支付结算</span>
				</div>
				<div class="jftop1">
					<span class="span1" style="width: 100%;">本次应交：<input type="text" v-model = 'yjzje' />  课程费：<input type="text" v-model = 'kcje' /> 物品费：<input type="text" v-model = 'jcje' /> <span v-if="qf>0" style='color: red;' >(还需缴：{{qf}})</span><br /><br /></span>
				</div>
				<div class="wcjs">
					<br />
					<div>
					<span>直减金额：</span><input type="text" v-model="zj" />
					<span>优惠卷支付：</span><input type="text" v-model="yhj" /> <span>优惠卷号：</span><input type="text" v-model="yhjh" />
					<i style="color: red;margin-left: 17px; font-style:normal">注：直减、优惠卷不能支付物品</i><br /><br />
					</div>
					<!--<span>现金支付：</span><input type="text" v-model="xj" /><span v-if="qf>0" style='color: red;' >(还需缴：{{qf}})</span><br /><br />
					<span>银行卡支付：</span><input type="text" v-model="yhkje" /><span>卡号：</span><input type="text" v-model="yhkh" /><span>银行：</span><input type="text" v-model="yh" /><br /><br />
					<span>支付宝支付：</span><input type="text" v-model="zfbje" /><span>账号：</span><input type="text" v-model="zfbh" /><br /><br />
					<span>微信支付：</span><input type="text" v-model="wxje" /><span>账号：</span><input type="text" v-model="wxh" /><br /><br />
					<span>支付备注：</span><input style="width: 500px;" type="text" v-model="zfbz" />
					<br /><br />-->
				</div>
				<div class="wcjs">
					<br />
				 <el-tabs v-model="zffs" type="card" @tab-click="handleClick">
				    <el-tab-pane label="线下支付" name="xj">
				    	<br />
				    		<span>现金支付：</span><input type="text" v-model="xj" /><span v-if="qf>0" style='color: red;'>(还需缴：{{qf}})</span><span  style='color: red;'>本次预存金额：{{yc}}</span><span>预存支付：</span><input type="text" v-model="ycjezf" /><br /><br />
							<span>银行卡支付：</span><input type="text" v-model="yhkje" /><span>卡号：</span><input type="text" v-model="yhkh" /><span>银行：</span><input type="text" v-model="yh" /><br /><br />
							<span>支付宝支付：</span><input type="text" v-model="zfbje" /><span>账号：</span><input type="text" v-model="zfbh" /><br /><br />
							<span>微信支付：</span><input type="text" v-model="wxje" /><span>账号：</span><input type="text" v-model="wxh" /><br /><br />
							<span>支付备注：</span><input style="width: 300px;" type="text" v-model="zfbz" />
							<br /><br />
						<div style="width: 90%;text-align: right;">
							<el-button type="danger" class="submit" v-if="fhsyb" @click="cancel">返回</el-button>
							<el-button type="danger" class="submit" v-if="!fhsyb" @click="syb">上一步</el-button>
							<el-button type="primary" class="submit" v-if="bc" @click="next">下一步</el-button>
							<el-button type="primary" class="submit" v-if="!bc" @click="submit22()">保存</el-button>
						</div>	
						<br />
				    </el-tab-pane>
				    <el-tab-pane label="微信扫码支付" name="wx">
				    	<br />
				    	<div style="overflow: hidden;">
				    		<div style="float: left;" >
								<span>支付金额：</span><input type="number" v-model="wxje" />
								<!--<span>账号：</span><input type="text" style="width: 100px;" v-model="wxh" />-->
								<span>订单号：</span><input type="text" style="width: 100px;" v-model="ddh" />
								<el-button  size="mini" style="margin-left: 20px;" @click="hqewm">二维码支付</el-button><br /><br />
								<span>支付备注：</span><input style="width: 300px;" type="text" v-model="zfbz" />
								<br /><br />
					    	</div>
					    	<div v-if="zfewm" id="ewm"  style="float: left; margin-left: 50px; width: 200px; height: 200px; "></div>
				    	</div>
				    	
				    	<div style="width: 90%;text-align: right;">
							<el-button type="primary" class="submit"  @click="cancel()">完成</el-button>
						</div>	
						<br />
				    </el-tab-pane>
				    <el-tab-pane label="支付宝扫码支付" name="zfb">
				    	<br />
						<!--<span>支付宝支付：</span><input type="text" v-model="zfbje" /><span>账号：</span><input type="text" style="width: 100px;" v-model="zfbh" /><br /><br />-->
						<div style="color: red; font-size: 25px;">功能正在研发。。。。。。</div>
				   		<br />
				   		<br />
				    </el-tab-pane>
				    <el-tab-pane label="银行卡刷卡支付" name="yhk">
				    	<br />
				   		<!--<span>银行卡支付：</span><input type="text" v-model="yhkje" /><span>卡号：</span><input type="text" style="width: 100px;" v-model="yhkh" /><span>银行：</span><input type="text" style="width: 100px;" v-model="yh" /><br /><br />-->
				   		<div style="color: red; font-size: 25px;">功能正在研发。。。。。。</div>
				   		<br />
				   		<br />
				    </el-tab-pane>
				  </el-tabs>
				
				</div>
			</div>
		</div>
		<br/>
		<div style="width: 90%;text-align: right;" v-if="bcbut">
			<el-button type="danger" class="submit" v-if="fhsyb" @click="cancel">返回</el-button>
			<el-button type="danger" class="submit" v-if="!fhsyb" @click="syb">上一步</el-button>
			<el-button type="primary" class="submit" v-if="bc" @click="next">下一步</el-button>
			<!--<el-button type="primary" class="submit" v-if="!bc" @click="submit22()">保存</el-button>-->
		</div>	
		<BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>
		<DdComponent v-if="portComponents.dingdan.toggle" @close="componentsHide" :params="this.xsid1"></DdComponent>
		<StudentComponent v-if="showstudent" @close="stydentlist" :params='this.xsxx'></StudentComponent>
		<Kschoose class="wpfl" @close="wpchoosecancel" v-if="showchoselist"></Kschoose>
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	import Kschoose from '../../manage/bs/xzwp'
	import BqComponent from '../../admin/xxjbszManage/bq'
	import DdComponent from '../baoming/dingdan'
	import StudentComponent from '../baoming/student'
	import QRCode from 'qrcodejs2'
	export default {
		props: ['params'],
		components: {
			BqComponent,
			Kschoose,
			StudentComponent,
			DdComponent
		},
		data() {
			return {
				pickerOptions0: {
		          disabledDate(time) {
		             return time.getTime() > Date.now() - 8.64e6
		          }
		        },  
		        zfewm:false,
		        bcbut:true,
		        zffs:'xj',
		        ddh:'',
				active: 0,
				ycjezf:0,
				ycje:0,
				formlist: true,
				formlist2: false,
				jflist: false,
				wcjslist: false,
				fhsyb: true,
				bc: true,
				showchoselist: false,
				showstudent: false,
				//				dataList: [], //表格数据
				dataList1: [], //表格数据
				comxjfyist: [],
				xzkclist: [],
				checkList: [],
				xsxx: '',

				title: '报名缴费',
				zfbz: '',
				zj: 0,
				xj: 0,
				yhj: 0,
				yhjh: '',
				yhkje: 0,
				yhkh: '',
				yh: '',
				zfbje: 0,
				zfbh: '',
				wxje: 0,
				wxh: '',
				portTitleList: [{
						prop: 'mc',
						label: '名称',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'jcjg',
						label: '单价',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'zk',
						label: '折扣',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'cns',
						label: '购买课次',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'yjje',
						label: '应交金额',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					
					{
						prop: 'wjje',
						label: '未支付',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					

				],
				portTitleList1: [{
						prop: 'mc',
						label: '课程分类',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'jcjg',
						label: '单价',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'zk',
						label: '折扣',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'ks',
						label: '购买课次',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'yjje',
						label: '应交金额',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},

				],
				portTitleList2: [{
						prop: 'mc',
						label: '教材名称',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'jcjg',
						label: '单价',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'zk',
						label: '折扣',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'number',
						label: '购买数量',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'dw',
						label: '单位',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
					{
						prop: 'yjje',
						label: '应交金额',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
				],
				comboxlist: [],
				bqList: [],
				vglxx1: '',
				vglxx2: [],
				vzfb: false,
				vwx: false,
				vxj: false,
				vsk: false,
				vsklx: 'xj',
				vdh: '',
				vmm: '',
				vxb: '男',
				vzwm: '',
				vywm: '',
				visqy: 'Y',
				vcsrq: '',
				vzsly: '',
				vfmdh: '',
				vwx: '',
				vjtdz: '',
				vglxx: '',
				vnjbj: '',
				yuer: '',
				vxh: '',
				activeNames: '1',
				ysbjid: '',
				ysbjmc: '',
				dialogTableVisible: true,
				ysbjList: [],
				xsid: '',
				xsid1: '',
				xszwm: '',
				portComponents: {
					bq: {
						type: 'bq',
						toggle: false,
						params: '',
						data: {}
					},
					dingdan: {
						type: 'dingdan',
						toggle: false,
						params: '',
						data: {}
					},
				}
			}
		},
		created() {
			if(this.params) {
				if(this.params.row) {
					this.vzwm = this.params.row.zwm
					this.vdh = this.params.row.dh
					this.ycje = this.params.row.ycje
					this.getStudentList()
					this.ysbjid = this.$route.query.iid
					this.ysbjmc = this.$route.query.mc
					if(this.params.row.bjzt == 2) {
						this.title = '续费补交'
					}
					if(this.params.row.cjcs>=0) {
						this.title = '续费补交'
					}
					
				} else {
					if(this.params.zt == 1) {
						this.title = '报名缴费'
						this.formlist = true
						this.formlist2 = false
					} else {
						this.title = '续费补交'
						this.formlist = false
						this.formlist2 = true
					}

					this.ysbjid = this.params.ysbjid
					this.ysbjmc = this.params.bjmc

				}

			} else {
				this.ysbjid = this.$route.query.iid
				this.ysbjmc = this.$route.query.mc
			}
			this.ysbj();
			this.getcomlist();
			this.getxzkclist()

		},
		watch:{
            'ycjezf': function(newVal,oldVal){
                if(parseInt(newVal) > parseInt(this.ycje)) {//如果小于等于零
                     this.$message.warning('输入的金额超过了预存金额!')
//                   this.parseInt(newVal)=0
					 this.ycjezf = 0
                }
            }
        },
		methods: {
			handleClick(tab, event){
				if(tab.name == 'xj'){
					this.wxje = 0
					this.zfewm = false
					this.zfbje = 0
					this.yhkje = 0
				}
				if(tab.name == 'wx'){
					this.xj = 0
					this.zfewm = false
					this.zfbje = 0
					this.yhkje = 0
				}
				if(tab.name == 'zfb'){
					this.zfewm = false
					this.xj = 0
					this.wxje = 0
					this.yhkje = 0
				}
				if(tab.name == 'yhk'){
					this.zfewm = false
					this.xj = 0
					this.wxje = 0
					this.zfbje = 0
				}
			},
			hqewm(){
				if(this.wxje<=0){
					this.$message.error('请输入支付金额！');
					return
				}
				this.zfewm = true
				if(document.getElementById('ewm')){
					document.getElementById('ewm').innerHTML =""
				}
				var params2 = qs.stringify({
					total_fee:this.wxje
                })
                 this.axios.post(this.$store.state.ewm+'xs/smpay.do',  params2 )
                 .then(res => {
                 	console.log(res,22222)
                 	this.ddh = res.data.lsh
                 	var je = res.data.url
                 	this.qrcode3(je)
                 }).catch(res => {
				})
			},
			qrcode3(je) {
				let qrcode = new QRCode('ewm', {  
			        width: 200,  
			        height: 200, // 高度  
			        text: je // 二维码内容  
			        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
			        // background: '#f0f'  
			        // foreground: '#ff0'  
			      })  
		            console.log(qrcode)  
			},
			jieshu(list) {
				this.$confirm('此操作将结束该条订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
					var params3 = qs.stringify({
						orderkcmxid: list.row.id,
						yhid: logininfo.id,
						xxid: logininfo.xxid,
					});
					this.axios.post(this.$store.state.api + 'ordermx/js', params3)
						.then(res => {
							this.$message({
								type: 'success',
								message: '结束成功！'
							});
							this.getxjfylist()
						}).catch(res => {
							console.log(res)
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			callzhiyjje(strvalue) {
				for(let i in this.checkList) {
					var o = this.checkList[i];
					var zk = o.yjje / (o.jcjg * o.ks) * 100;
					o.zk = Math.round(zk * 10) / 10
				}
			},
			callzhi(strvalue) {
				console.log(this.checkList, 1111)
				for(let i in this.checkList) {
					var o = this.checkList[i];
					var yjje = o.jcjg * o.ks * o.zk * 1 / 100;
					o.yjje = Math.round(yjje * 10) / 10
				}
			},
			getStudentList() {
				var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
				var params3 = qs.stringify({
					keyword: this.vzwm,
					dh: this.vdh,
					bjid: this.ysbjid,
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				});
				this.axios.post(this.$store.state.api + 'xs/xscx', params3)
					.then(res => {
						if(res.data.data.list.length == 1) {
							this.dataList = res.data.data.list;
							this.vdh = this.dataList[0].dh
							this.vxb = this.dataList[0].xb
							this.vzwm = this.dataList[0].zwm
							this.vywm = this.dataList[0].ywm
							this.vcsrq = this.dataList[0].csrq
							this.vzsly = this.dataList[0].zsly
							this.vfmdh = this.dataList[0].fmdh
							this.vwx = this.dataList[0].wx
							this.vjtdz = this.dataList[0].jtdz
							this.vglxx = this.dataList[0].glxx
							this.vnjbj = this.dataList[0].njbj
							this.xsid1 = this.dataList[0].id
							this.yuer = this.dataList[0].yuer
							this.bqList = this.dataList[0].bq
//							this.bqList.push(this.dataList[0].bq)
							this.bqList = this.dataList[0].bq.split(",");
						} else {
							this.czxs()
						}
						this.total = res.data.data.totalPage;
					}).catch(res => {
						console.log(res)
					})
			},
			czxs() {
				this.xsxx = {
					zwm: this.vzwm,
					dh: this.vdh,
					bjid: this.ysbjid
				}
				this.showstudent = true
			},
			adr(){
				console.log(this.checkList)
			},
			stydentlist(data) {
				if(data.cancel) {
					this.showstudent = false
				} else {
					this.vdh = data.data.dh
					this.vxb = data.data.xb
					this.vzwm = data.data.zwm
					this.vywm = data.data.ywm
					//					 this.visqy= this.data.data.isqy
					this.vcsrq = data.data.csrq
					this.vzsly = data.data.zsly
					this.vfmdh = data.data.fmdh
					this.vwx = data.data.wx
					this.vjtdz = data.data.jtdz
					this.vglxx = data.data.glxx
					this.vnjbj = data.data.njbj
					this.bqList = data.data.bq.split(",");
					
					this.xsid1 = data.data.id
					this.yuer = data.data.yuer
					this.ycje = data.data.ycje
					this.showstudent = false
				}

			},
			showwp() {
				this.showchoselist = true;
			},
			wpchoosecancel(setting) {

				if(setting.data) {
					setting.data.forEach((v) => {
						this.dataList1.push(v)
					})
					console.log(this.dataList1, 111133)
					this.showchoselist = false;
				} else {
					this.showchoselist = false;
				}

			},
			yichu(index) {
				this.dataList1.splice(index, 1)
			},
			syb() {
				if(this.active == 1) {
					if(this.params) {
						if(this.params.zt == 2) {
							this.formlist2 = true
						} else {
							this.formlist = true
						}
					} else {
						this.formlist = true
					}
					this.jflist = false
					this.fhsyb = true
					this.active--
				} else if(this.active == 2) {
					this.jflist = true
					this.wcjslist = false
					this.bc = true
					this.active--
					this.bcbut = true
				}

			},
//			下一步
			next() {
				if(this.active == 0) {
					if(!this.vzwm) {
						this.$message.warning('请填写中文名');
						return;
					} else if(!this.vdh) {
						this.$message.warning('请填写学生电话');
						return;
					}
//					else if(this.formlist == false){
//						if(!this.ysbjid) {
//							this.$message.warning('请选择预设班级');
//							this.$store.state.loading = false;
//							return;
//						}
//					}else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.vdh))) {
//						this.$message.warning('您输入的学生电话号码有误');
//						return;
//					}
					if(this.vfmdh){
						if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.vfmdh))){
							this.$message.warning('您输入父母的电话号码有误');
							return
						}
					}
					if(this.ysbjid) {
						this.getbjwpxx()
						this.getxzkclist()
					}
					this.formlist = false
					this.formlist2 = false
					this.jflist = true
					this.fhsyb = false
					if(this.xsid1) {
						this.getxjfylist()
					}
					this.active++
				} else if(this.active == 1) {
					this.jflist = false
					this.wcjslist = true
					this.bc = false
					this.bcbut = false
					this.active++
				} else if(this.active == 2) {
					this.active++
				}
			},
			tableCellControl(scope) { //表格单元格控制CSS样式
				// console.log(scope)
				/*if (scope.row.id == 112 && scope.column.property == "iname") {
				    return {
				        color:"red",
				    }
				}else{
				    return {
				        color:"green",
				    }
				}*/
			},
			getbjwpxx(){
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					bjid: this.ysbjid,
					xsid: this.xsid1,
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'bj/getbjkc', params2)
					.then(res => {
						if(res.data.data.kclist){
							this.checkList = res.data.data.kclist
							console.log(this.checkList,56565655)
//							for(var i in res.data.data.kclist){
//								this.checkList.push(res.data.data.kclist[i])
//							}
						}
						this.dataList1 = res.data.data.jclist
					}).catch(res => {
					})
			},
			getxzkclist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'kcfl/getfllist', params2)
					.then(res => {
						this.xzkclist = res.data.data.list;
					}).catch(res => {
					})
			},

			getcomlist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'nj/getlist', params2)
					.then(res => {
						let data = res.data.data;
						let list = data.list;
						this.comboxlist = list;
					}).catch(res => {})
			},
			getxjfylist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid,
					xsid: this.xsid1
				})
				//执行
				this.axios.post(this.$store.state.api + 'ordermx/getkcmx', params2)
					.then(res => {
						this.comxjfyist = res.data.data;
					}).catch(res => {})
			},
			delbq(bq) {
				var dd = [];
				for(let i in this.bqList) {
					if(this.bqList[i] == bq) {
						continue
					} else {
						dd.push(this.bqList[i]);
					}
				}
				this.bqList = dd;
			},
			ysbj() {
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.axios.post(this.$store.state.api + 'bj/getbjxlk', params3)
					.then(res => {
						this.ysbjList = res.data.data.list;
					}).catch(res => {

					})
			},
			submit22(){
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
						yhjh: this.yhjh,
						zj: this.zj,
						je: this.sum + '',
						zfbzh: this.zfbh,
						zfbje: this.zfbje,
						wxzh: this.wxh,
						wxje: this.wxje,
						yhkzh: this.yhkh,
						yhkje: this.yhkje,
						xj: this.xj,
						yhj: this.yhj,
						xsid:this.params.row.id,
						yc: this.yc,
						zfyuer :this.ycjezf,
						yhid: logininfo.id + '',
						xxid: logininfo.xxid + '',
				});
				//执行
				this.axios.post(this.$store.state.api + 'order/xsbj', params3)
					.then(res => {
						console.log(res,98988888)
						this.$message.success('补交完成 ! ');
							this.$emit('close', {
								type: 'bujiao',
								cancel: false
							});
					}).catch(res => {
						this.$message.warning("服务器繁忙，请重试" + res.data.msg);
						this.$store.state.loading = false;
					})
			},
//			submit1() {
//				if(!this.vzwm) {
//					this.$message.warning('请填写中文名');
//					this.$store.state.loading = false;
//					return;
//				} else if(!this.ysbjid) {
//					this.$message.warning('请选择预设班级');
//					this.$store.state.loading = false;
//					return;
//				} else if(!this.vywm) {
//					this.$message.warning('请填写英文名');
//					this.$store.state.loading = false;
//					return;
//				} else if(!this.vdh) {
//					this.$message.warning('请填写学生电话');
//					this.$store.state.loading = false;
//					return;
//				}
//
//				this.$router.push({
//					path: '/cost/pay',
//					query: {
//						iid: this.xszwm,
//						id: this.xsid
//					}
//				})
//			},
//			submit22() {
//				//检测
//				this.$store.state.loading = true;
//				if(this.sum <this.jcje){
//					this.$message.warning('请您支付金额!');
//					this.$store.state.loading = false;
//					return
//				}
//				var time1 = this.$.getLocalTimeNo0(Date.parse(this.vcsrq));
//				var logininfo = JSON.parse(localStorage.logininfo);
//				var params3 = qs.stringify({
//					dh: this.vdh,
//					xb: this.vxb,
//					zwm: this.vzwm,
//					ywm: this.vywm,
//					isqy: this.visqy,
//					csrq: time1,
//					zsly: this.vzsly,
//					fmdh: this.vfmdh,
//					wx: this.vwx,
//					jtdz: this.vjtdz,
//					glxx: this.vglxx1,
//					njbj: this.vnjbj,
//					bq: this.bqList + '',
//					ysbjid: this.ysbjid,
//					xsid: this.xsid1,
//					yhid: logininfo.id,
//					xxid: logininfo.xxid
//				});
//				//执行
//				this.axios.post(this.$store.state.api + 'xs/insert', params3)
//					.then(res => {
//						if(res.data.data[0].code == "Y") {
//							if(res.data.data[0].vxsid) {
//								this.xsid = res.data.data[0].vxsid
//								this.addjf(this.xsid)
//							} else {
//								this.xsid = res.data.data[0].pxsid
//								this.addjf(this.xsid)
//							}
//							this.$message.success(res.data.data[0].msg);
//							this.$store.state.loading = false;
////							this.$emit('close', {
////								type: 'bujiao',
////								cancel: false
////							});
//						} else {
//							this.$message.warning(res.data.data[0].msg);
//							this.$store.state.loading = false;
//						}
//
//					}).catch(res => {
//						this.$message.warning("服务器繁忙，请重试" + res.data.msg);
//						this.$store.state.loading = false;
//					})
//			},
//			addjf(xsid) {
////				this.$emit('close', {
////								type: 'bujiao',
////								cancel: false
////							});
//				if(this.checkList.length>0){
//					this.issp = "Y"
//				}else{
//					this.issp = "N"
//				}
//				this.dialogAccounts = true;
//				let promise = new Promise((resolve, reject) => {
//					var logininfo = JSON.parse(localStorage.logininfo);
//					var params3 = qs.stringify({
//						issp:this.issp,
//						zj: this.zj,
//						zfbz: this.zfbz,
//						yhjh: this.yhjh,
//						yh: this.yh,
//						zfyuer: this.zfyuer,
//						jsr: logininfo.id,
//						zfbzh: this.zfbh,
//						zfbje: this.zfbje,
//						wxzh: this.wxh,
//						wxje: this.wxje,
//						yhkzh: this.yhkh,
//						yhkje: this.yhkje,
//						xj: this.xj,
//						yhj: this.yhj,
//						je: this.sum + '',
//						wpje: this.jcje,
//						kcje: this.kcje,
//						yhid: logininfo.id + '',
//						xxid: logininfo.xxid + '',
//						xsid: xsid,
//						qf:this.qf,
//					});
//					this.axios.post(this.$store.state.api + 'order/insert', params3)
//						.then(res => {
//							if(this.checkList.length == 0 && this.dataList1.length == 0){
//								this.$emit('close', {
//									type: 'bujiao',
//									cancel: false
//								});
//								return
//							}
//							resolve(res.data)
//							// location.reload() //刷新页面
//							// this.$router.go(-1)
//							// this.dialogAccounts = false;
//
//						}).catch(res => {
//						})
//				})
//
//				promise.then(res => {
//					this.checkList.forEach((v, i) => {
//						var params2 = qs.stringify({
//							orderid: res,
//							splx: 2,
//							wpje: this.jcje,
//							kcje: this.kcje,
//							je: this.sum + '',
//							spid: v.id,
//							jg: this.totalAmount,
//							zk: v.zk,
//							cns: v.ks
//						});
//						this.axios.post(this.$store.state.api + 'ordermx/insert', params2)
//							.then(res => {
//								this.$emit('close', {
//									type: 'bujiao',
//									cancel: false
//								});
//							}).catch(res => {
//							})
//					})
//					this.dataList1.forEach((v, i) => {
//						var params2 = qs.stringify({
//							orderid: res,
//							splx: 1,
//							jcjg: v.jcjg,
//							spid: v.id,
//							jg: this.jcje,
//							zk: v.zk,
//							cns: v.number
//						});
//						this.axios.post(this.$store.state.api + 'ordermx/insert', params2)
//							.then(res => {
//								this.$emit('close', {
//									type: 'bujiao',
//									cancel: false
//								});
//
//							}).catch(res => {
//							})
//					})
//				}).catch(res => {
//				})
//			},
			cancel() {
				if(this.params) {
					this.$emit('close', {
						type: 'bujiao',
						cancel: true
					})
				} else {
					this.$emit('close', {
						type: 'bujiao',
						cancel: true
					})
					this.$router.back(-1)
				}
			},
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				if(setting.name) {
					this.portComponents.bq.toggle = false;
					for(let b in setting.clist) {
						this.vglxx2.push(setting.clist[b]);
						this.vglxx1 = this.vglxx2 + ''
					}
				} else {
					for(let i in this.portComponents) {
						if(setting.type == this.portComponents[i].type) {
							this.portComponents[i].toggle = false;
							if(this.portComponents[i].type == 'bq') {
								if(!setting.cancel) {
									for(let b in setting.clist) {
										this.bqList.push(setting.clist[b]);
									}

								}
							} else {
								if(!setting.cancel) {}
							}
							return;
						}
					}
				}

			}
		},
		computed: {
			yc() {
				let number = (parseInt(this.xj)+parseInt(this.wxje)+parseInt(this.zfbje)+parseInt(this.yhkje)+parseInt(this.yhj)+parseInt(this.zj)+ parseInt(this.ycjezf)-parseInt(this.yjzje));
				if(number > 0){
					return number
				}else{
					return 0
				}
			},
			qf() {
				let number = (this.kcje * 1 + this.jcje * 1 + this.hxjje * 1) - (this.xj * 1 + this.zfbje * 1 + this.wxje * 1 + this.yhkje * 1 + this.zj * 1 + this.yhj * 1);
				if(number > 0) {
					return number.toFixed(2)
				} else {
					return 0
				}
			},
			hxjje(){
				let number = 0.00;
				for(let i in this.comxjfyist){
					number += (this.comxjfyist[i].wjje || 0) 
				}
				return number.toFixed(2)
			},
			kcje() { //课时合计
				console.log(this.checkList, 1111)
				let number = 0.00;
				for(let i in this.checkList) {

					number += (this.checkList[i].jcjg || 0) * (this.checkList[i].ks || 0) * (this.checkList[i].zk * 1 / 100 || 0)

				}
				return number.toFixed(2)
			},
			jcje() { //教材合计
				console.log(this.dataList1)
				let number = 0.00;
				for(let i in this.dataList1) {

					number += (this.dataList1[i].jcjg || 0) * (this.dataList1[i].number || 0) * (this.dataList1[i].zk * 1 / 100 || 0)

				}
				return number.toFixed(2)
			},
			yjzje() {
				return(parseInt(this.kcje) + parseInt(this.jcje) + parseInt(this.hxjje)).toFixed(2)
			},
			sum() {
				return this.xj * 1 + this.zfbje * 1 + this.wxje * 1 + this.yhkje * 1+ this.ycjezf * 1
			},
			sum2() {
				return this.xj * 1 + this.zfbje * 1 + this.wxje * 1 + this.yhkje * 1
			},
			zfyuer() {
				if(this.sum2 > this.yjzje) {
					return this.sum2 - this.yjzje
				} else {
					return 0
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		/*text-align: center;*/
	}
	
	.jflist {
		width: 100%;
		/*border: 1px solid #EBEEF5;*/
		/*height: 500px;*/
		.jftop1 {
			width: 100%;
			height: 50px;
			overflow: hidden;
			input {
				width: 100px;
				;
				border: none;
				outline: none;
				background: transparent;
				border-bottom: 1px solid #ccc;
			}
			.span1 {
				width: 70%;
				height: 100%;
				line-height: 50px;
				border: 1px solid #EBEEF5;
				float: left;
				padding-left: 20px;
			}
			.span2 {
				width: 20%;
				border: 1px solid #EBEEF5;
				height: 100%;
				line-height: 50px;
				float: left;
				padding-left: 20px;
			}
			.span3 {
				width: 10%;
				border: 1px solid #EBEEF5;
				height: 100%;
				line-height: 50px;
				float: left;
			}
		}
		.wcjs {
			padding-left: 20px;
			border: 1px solid #EBEEF5;
			overflow: hidden;
			span {
				text-align: right;
				float: left;
			}
			input {
				width: 100px;
				;
				height: 20px;
				border: none;
				outline: none;
				background: transparent;
				border-bottom: 1px solid #ccc;
				float: left;
			}
		}
	}
	
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 16px;
		padding-left: 15px;
	}
	
	.bzylist {
		.inplist1 {
			overflow: hidden;
			text-align: center;
			.inpdiv {
				width: 32%;
				height: 70px;
				line-height: 70px;
				float: left;
				span {
					/*width: 30%;*/
					float: left;
					text-align: right;
				}
				.inp {
					width: 60%;
				}
			}
		}
	}
	/*.input {
		width: 180px;
		display: inline-block;
	}*/
	
	.select-block {
		width: 30%;
	}
	
	.submit {
		width: 120px;
		margin-top: 5px;
	}
	
	.submit1 {
		width: 85px;
		margin-top: 5px;
	}
	
	.el-checkbox+.el-checkbox {
		margin-left: 10px;
	}
</style>